<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Pet Clinic</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron jumbotron-welcome">
      <div class="container">
        <header>
          <a class="navbar-brand navbar-brand-nopadding pull-left" href="/">
            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo-brand.png">
          </a>
          <a class="btn btn-default btn-inverse pull-right" href="#">Sign In</a>
        </header>
        <div class="jumbotron-headline">
          <div class="jumbotron-headline-cell">
            <h1>Pet care for the People who love them</h1>
            <p>PetClinic is here to enhance people's relationships with their pets</p>
            <p>
              <a class="btn btn-cta js-scroll-nav" href="#appointment" role="button">Make an Appointment</a>
              <a class="btn btn-cta btn-inverse js-scroll-nav" href="#services" role="button">Learn More</a>
            </p>
            <a href="#services" class="scroll-down js-scroll-nav">Scroll Down</a>
          </div>
        </div>
      </div>
      <video loop="loop" preload="auto" class="jumbotron-video" autoplay muted>
        <source src="videos/hero.mp4" type="video/mp4">
      </video>
    </div>

    <!-- Companies -->
    <section class="sections sections-narrow  sections-companies">
      <img src="images/client-logos.png" alt="Client logos">
    </section>

    <!-- Services 1 section -->
    <section id="services" class="sections sections-services">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-push-6">
            <img class="img-circle img-circle-auto pull-right" src="images/image-service-1.png" alt="Service 1">
          </div>
          <div class="col-md-6 col-md-pull-6">
            <h3 class="section-heading">Everything you need to manage you clients and their pets</h3>
            <p class="section-desc">PetClinic is everything you need for an effective management. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Services 2 section -->
    <section id="services2" class="sections sections-services">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="img-circle img-circle-auto" src="images/image-service-2.png" alt="Service 2">
          </div>
          <div class="col-md-6">
            <h3 class="section-heading">Customized that’s just right for you </h3>
            <p class="section-desc">Our scalable system is configured to suit your need. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Services 3 section -->
    <section id="services3" class="sections sections-services">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-push-6">
            <img class="img-circle img-circle-auto pull-right" src="images/image-service-3.png" alt="Service 3">
          </div>
          <div class="col-md-6 col-md-pull-6">
            <h3 class="section-heading">Access anywhere even on-the-go</h3>
            <p class="section-desc">Whether you’re on your desk or on mobile, PetClinic is available wherever you may be. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Featured veterinarians -->
    <section class="sections">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div class="text-center">
              <h3 id="veterianarians" class="section-heading">Our awesome veterinarians</h3>
              <p class="section-desc">We believe in a diverse range of personel to bring creative skills, thoughts, and ideas to the table. Be cool, we awesome, be with us today, really ok?</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet1.jpg" alt="Vet 1" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">James Carter</h3>
                <p class="caption-meta caption-meta-uppercase">Radiology</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet2.jpg" alt="Vet 2" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Carlos Estaban</h3>
                <p class="caption-meta caption-meta-uppercase">Radiology</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet3.jpg" alt="Vet 3" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Helen Leary</h3>
                <p class="caption-meta caption-meta-uppercase">Surgery</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet4.jpg" alt="Vet 4" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Linda Douglas</h3>
                <p class="caption-meta caption-meta-uppercase">Dentistry surgery</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet5.jpg" alt="Vet 5" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Sharon Jenkins</h3>
                <p class="caption-meta caption-meta-uppercase">Surgery</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet6.jpg" alt="Vet 6" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Rafael Ortega</h3>
                <p class="caption-meta caption-meta-uppercase">Radiology</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet7.jpg" alt="Vet 7" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Henry Stevens</h3>
                <p class="caption-meta caption-meta-uppercase">Surgery</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail thumbnail-noborder">
              <img src="images/vet8.jpg" alt="Vet 8" class="img-circle">
              <div class="caption">
                <h3 class="caption-heading">Jenkins Helen</h3>
                <p class="caption-meta caption-meta-uppercase">Radiology</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->
    <section id="testimonials" class="sections sections-testimonials">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 text-center">
            <h3 class="section-heading">Our happy customers say</h3>
            <img class="img-circle img-circle-medium" src="images/veterinarian-default.jpg" alt="Generic placeholder image">
            <h4 class="section-title">Betty Davis, Dogs Associations Inc.</h4>
            <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
            <ol class="carousel-indicators carousel-indicators-static">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1" class=""></li>
              <li data-target="#myCarousel" data-slide-to="2" class=""></li>
            </ol>
          </div>
        </div>

      </div>
    </section>

    <!-- Numbers -->
    <section id="companies" class="sections sections-numbers">
      <div class="container text-center">
        <div class="row">
          <div class="col-md-3">
            <div class="stats-numbers">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
              <p class="stats-number">1325</p>
              <span class="stats-label">Pet Owners</span>
            </div>
          </div>
          <div class="col-md-3">
            <div class="stats-numbers">
              <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
              <p class="stats-number">2325</p>
              <span class="stats-label">Pets</span>
            </div>
          </div>
          <div class="col-md-3">
            <div class="stats-numbers">
              <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
              <p class="stats-number">903</p>
              <span class="stats-label">Pet Visits</span>
            </div>
          </div>
          <div class="col-md-3">
            <div class="stats-numbers">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              <p class="stats-number">24</p>
              <span class="stats-label">Veterinarians</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Make an appointment call to action -->
    <section id="appointment" class="jumbotron jumbotron-secondary jumbotron-appointment">
      <div class="container">
        <div class="jumbotron-headline">
          <div class="jumbotron-headline-cell">
            <h2>Over 40,000 pet owners trust us.</h2>
            <p>Use it as a starting point to create something more unique.</p>
            <form class="form-inline">
              <div class="form-group">
                <label class="sr-only" for="clientName">Your Name</label>
                <input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
              </div>
              <div class="form-group">
                <label class="sr-only" for="emailAddress">Email Address</label>
                <input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
              </div>
              <div class="form-group">
                <label class="sr-only" for="clientNumber">Contact Number</label>
                <input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
              </div>
              <button type="submit" class="btn btn-cta">Get an Appointment</button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Add Owner / Register -->
    <!-- <section id="add_owner" class="sections sections-narrow"> -->
    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <!-- Three columns of text below the carousel -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h5">Company Information</h3>
            <ul class="list-unstyled">
              <li><a href="#">About Us</a></li>
              <li><a href="#">Updtes</a></li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms of Services</a></li>
            <ul>
          </div>
          <div class="col-md-3">
            <h3 class="h5">Wanna talk?</h3>
            <ul class="list-unstyled">
              <li>Call us at (203) 420-0234</li>
              <li>Email us to info@petclinic.com</li>
              <li>We respond to emails within one business day. Hours: Mon - Fri from 9am - 7pm ET</li>
            <ul>
          </div>
          <div class="col-md-3">
            <h3 class="h5">Follow Us</h3>
            <ul class="list-unstyled">
              <li><a href="#">Facebook</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Google Plus</a></li>
            <ul>
          </div>
          <div class="col-md-3">
            <h3 class="h5">Questions or comments</h3>
            <p>Cras mattis consectetur purus sit amet fermentum. </p>
            <p>
              <a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-primary">Drop us a line</a>
            </p>
          </div>
        </div>
      </div>
    </footer>

    <div class="colophon">
      <div class="container">
        <p class="pull-left">
          <img src="images/logo-footer.png" class="logo-footer"> © 2015 Pet Clinic, A Spring Framework Demonstration.
        </p>
        <p class="pull-right">Design by Andrew Abogado. See the Colophon for details on the design and code.</p>
      </div>
    </div>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
</body>
</html>
